Kết hợp trạng thái tải của React Suspense: Quản lý tải lồng nhau

React Suspense, được giới thiệu trong React 16.6, cung cấp một cách khai báo để xử lý trạng thái tải trong ứng dụng của bạn. Nó cho phép bạn "tạm dừng" việc render một thành phần cho đến khi các phần phụ thuộc của nó (như dữ liệu hoặc mã) sẵn sàng. Mặc dù việc sử dụng cơ bản của nó tương đối đơn giản, việc thành thạo Suspense đòi hỏi phải hiểu cách kết hợp các trạng thái tải một cách hiệu quả, đặc biệt là khi xử lý các tình huống tải lồng nhau. Bài viết này cung cấp một hướng dẫn toàn diện về React Suspense và các kỹ thuật kết hợp nâng cao của nó để mang lại trải nghiệm người dùng mượt mà và hấp dẫn.

Tìm hiểu những điều cơ bản về React Suspense

Về cơ bản, Suspense là một thành phần React chấp nhận một prop fallback. Fallback này được render trong khi các thành phần được Suspense bao bọc đang chờ một cái gì đó được tải. Các trường hợp sử dụng phổ biến nhất bao gồm:

• Chia tách mã với React.lazy: Nhập động các thành phần để giảm kích thước gói ban đầu.
• Tìm nạp dữ liệu: Chờ dữ liệu từ một API được phân giải trước khi render thành phần phụ thuộc vào nó.

Chia tách mã với React.lazy

React.lazy cho phép bạn tải các thành phần React theo yêu cầu. Điều này có thể cải thiện đáng kể thời gian tải ban đầu của ứng dụng, đặc biệt đối với các ứng dụng lớn có nhiều thành phần. Dưới đây là một ví dụ cơ bản:

            import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, MyComponent chỉ được tải khi cần. Trong khi nó đang tải, fallback (trong trường hợp này, một thông báo "Loading..." đơn giản) sẽ được hiển thị.

Tìm nạp dữ liệu với Suspense

Trong khi React.lazy hoạt động ngay lập tức với Suspense, việc tìm nạp dữ liệu đòi hỏi một cách tiếp cận hơi khác. Suspense không tích hợp trực tiếp với các thư viện tìm nạp dữ liệu tiêu chuẩn như fetch hoặc axios. Thay vào đó, bạn cần sử dụng một thư viện hoặc một mẫu có thể "tạm dừng" một thành phần trong khi chờ dữ liệu. Một giải pháp phổ biến bao gồm việc sử dụng thư viện tìm nạp dữ liệu như swr hoặc react-query, hoặc triển khai một chiến lược quản lý tài nguyên tùy chỉnh.

Dưới đây là một ví dụ khái niệm sử dụng cách tiếp cận quản lý tài nguyên tùy chỉnh:

            // Resource.js
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Fetched Data!' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

// App.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <Suspense fallback={<p>Loading data...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Giải thích:

• createResource: Hàm này nhận một promise và trả về một đối tượng với phương thức read.
• read: Phương thức này kiểm tra trạng thái của promise. Nếu nó đang chờ xử lý, nó sẽ ném ra promise, làm tạm dừng thành phần. Nếu nó đã được phân giải, nó trả về dữ liệu. Nếu nó bị từ chối, nó sẽ ném ra lỗi.
• MyComponent: Thành phần này sử dụng phương thức resource.read() để truy cập dữ liệu. Nếu dữ liệu chưa sẵn sàng, thành phần sẽ bị tạm dừng.
• App: Bao bọc MyComponent trong Suspense, cung cấp giao diện người dùng dự phòng trong khi dữ liệu đang tải.

Kết hợp trạng thái tải: Sức mạnh của Suspense lồng nhau

Sức mạnh thực sự của Suspense nằm ở khả năng kết hợp của nó. Bạn có thể lồng các thành phần Suspense để tạo ra các trải nghiệm tải chi tiết và phức tạp hơn. Điều này đặc biệt hữu ích khi xử lý các thành phần có nhiều phần phụ thuộc bất đồng bộ hoặc khi bạn muốn ưu tiên tải các phần nhất định của giao diện người dùng.

Suspense lồng nhau cơ bản

Hãy tưởng tượng một kịch bản mà bạn có một trang với tiêu đề, khu vực nội dung chính và thanh bên. Mỗi thành phần này có thể có các phần phụ thuộc bất đồng bộ riêng. Bạn có thể sử dụng các thành phần Suspense lồng nhau để hiển thị các trạng thái tải khác nhau cho mỗi phần một cách độc lập.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Loading header...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Loading main content...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Loading sidebar...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, mỗi thành phần (Header, MainContent và Sidebar) được bao bọc trong một ranh giới Suspense riêng. Điều này có nghĩa là nếu Header vẫn đang tải, thông báo "Loading header..." sẽ được hiển thị, trong khi MainContent và Sidebar vẫn có thể tải độc lập. Điều này mang lại trải nghiệm người dùng phản hồi nhanh hơn và nhiều thông tin hơn.

Ưu tiên các trạng thái tải

Đôi khi, bạn có thể muốn ưu tiên tải các phần nhất định của giao diện người dùng. Ví dụ, bạn có thể muốn đảm bảo rằng tiêu đề và điều hướng được tải trước nội dung chính. Bạn có thể đạt được điều này bằng cách lồng các thành phần Suspense một cách chiến lược.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Loading header and content...</p>}>
      <Header />
      <Suspense fallback={<p>Loading main content...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, Header và MainContent đều được bao bọc trong một ranh giới Suspense bên ngoài duy nhất. Điều này có nghĩa là thông báo "Loading header and content..." sẽ được hiển thị cho đến khi cả Header và MainContent đều được tải. Suspense bên trong cho MainContent sẽ chỉ được kích hoạt nếu Header đã được tải, cung cấp trải nghiệm tải chi tiết hơn cho khu vực nội dung.

Quản lý tải lồng nhau nâng cao

Ngoài việc lồng cơ bản, bạn có thể áp dụng các kỹ thuật nâng cao hơn để quản lý trạng thái tải trong các ứng dụng phức tạp. Chúng bao gồm:

• Thành phần dự phòng tùy chỉnh: Sử dụng các chỉ báo tải hấp dẫn và nhiều thông tin hơn về mặt hình ảnh.
• Xử lý lỗi với Error Boundaries: Xử lý lỗi một cách duyên dáng xảy ra trong quá trình tải.
• Debouncing và Throttling: Tối ưu hóa số lần một thành phần cố gắng tải dữ liệu.
• Kết hợp Suspense với Transitions: Tạo các chuyển đổi mượt mà giữa trạng thái đang tải và đã tải.

Thành phần dự phòng tùy chỉnh

Thay vì sử dụng các thông báo văn bản đơn giản làm phần dự phòng, bạn có thể tạo các thành phần dự phòng tùy chỉnh mang lại trải nghiệm người dùng tốt hơn. Các thành phần này có thể bao gồm:

• Spinners: Các chỉ báo tải động.
• Skeletons: Các phần tử UI giữ chỗ bắt chước cấu trúc của nội dung thực tế.
• Thanh tiến trình: Các chỉ báo trực quan về tiến độ tải.

Dưới đây là một ví dụ về việc sử dụng thành phần skeleton làm phần dự phòng:

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // You'll need to install this library

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Ví dụ này sử dụng thư viện react-loading-skeleton để hiển thị một loạt các phần giữ chỗ skeleton trong khi MyComponent đang tải.

Xử lý lỗi với Error Boundaries

Điều quan trọng là phải xử lý các lỗi có thể xảy ra trong quá trình tải. React cung cấp Error Boundaries, là các thành phần bắt lỗi JavaScript ở bất kỳ đâu trong cây thành phần con của chúng, ghi lại các lỗi đó và hiển thị giao diện người dùng dự phòng. Error Boundaries hoạt động tốt với Suspense để cung cấp cơ chế xử lý lỗi mạnh mẽ.

            import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Loading...</p>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, thành phần ErrorBoundary bao bọc thành phần Suspense. Nếu lỗi xảy ra trong quá trình tải MyComponent, ErrorBoundary sẽ bắt lỗi và hiển thị thông báo "Something went wrong."

Debouncing và Throttling

Trong một số trường hợp, bạn có thể muốn giới hạn số lần một thành phần cố gắng tải dữ liệu. Điều này có thể hữu ích nếu quá trình tìm nạp dữ liệu tốn kém hoặc nếu bạn muốn ngăn chặn các cuộc gọi API quá mức. Debouncing và throttling là hai kỹ thuật có thể giúp bạn đạt được điều này.

Debouncing: Trì hoãn việc thực thi một hàm cho đến khi một khoảng thời gian nhất định đã trôi qua kể từ lần cuối cùng nó được gọi.

Throttling: Giới hạn tốc độ mà một hàm có thể được thực thi.

Mặc dù các kỹ thuật này thường được áp dụng cho các sự kiện đầu vào của người dùng, chúng cũng có thể được sử dụng để kiểm soát việc tìm nạp dữ liệu trong các ranh giới Suspense. Việc triển khai sẽ phụ thuộc vào thư viện tìm nạp dữ liệu cụ thể hoặc chiến lược quản lý tài nguyên mà bạn đang sử dụng.

Kết hợp Suspense với Transitions

API React Transitions (được giới thiệu trong React 18) cho phép bạn tạo các chuyển đổi mượt mà hơn giữa các trạng thái khác nhau trong ứng dụng của mình, bao gồm trạng thái đang tải và đã tải. Bạn có thể sử dụng useTransition để báo hiệu cho React rằng một bản cập nhật trạng thái là một transition, điều này có thể giúp ngăn chặn các bản cập nhật giao diện người dùng đột ngột.

            import React, { Suspense, lazy, useState, useTransition } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  const [isPending, startTransition] = useTransition();
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Load Component'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Loading component...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, việc nhấp vào nút "Load Component" sẽ kích hoạt một transition. React sẽ ưu tiên tải MyComponent trong khi vẫn giữ giao diện người dùng phản hồi. Trạng thái isPending cho biết liệu một transition có đang diễn ra hay không, cho phép bạn vô hiệu hóa nút và cung cấp phản hồi trực quan cho người dùng.

Ví dụ và kịch bản thực tế

Để minh họa thêm các ứng dụng thực tế của Suspense lồng nhau, hãy xem xét một vài kịch bản thực tế:

• Trang sản phẩm thương mại điện tử: Một trang sản phẩm có thể có nhiều phần, chẳng hạn như chi tiết sản phẩm, đánh giá và các sản phẩm liên quan. Mỗi phần có thể được tải độc lập bằng cách sử dụng các ranh giới Suspense lồng nhau. Bạn có thể ưu tiên tải chi tiết sản phẩm để đảm bảo người dùng nhìn thấy thông tin quan trọng nhất càng nhanh càng tốt.
• Nguồn cấp dữ liệu mạng xã hội: Một nguồn cấp dữ liệu mạng xã hội có thể bao gồm các bài đăng, bình luận và hồ sơ người dùng. Mỗi thành phần này có thể có các phần phụ thuộc bất đồng bộ riêng. Suspense lồng nhau cho phép bạn hiển thị giao diện người dùng giữ chỗ cho mỗi phần trong khi dữ liệu đang được tải. Bạn cũng có thể ưu tiên tải các bài đăng của chính người dùng để cung cấp trải nghiệm cá nhân hóa.
• Ứng dụng Dashboard: Một dashboard có thể chứa nhiều widget, mỗi widget hiển thị dữ liệu từ các nguồn khác nhau. Suspense lồng nhau có thể được sử dụng để tải từng widget một cách độc lập. Điều này cho phép người dùng nhìn thấy các widget có sẵn trong khi các widget khác vẫn đang tải, tạo ra trải nghiệm phản hồi nhanh và tương tác hơn.

Ví dụ: Trang sản phẩm thương mại điện tử

Hãy cùng tìm hiểu cách bạn có thể triển khai Suspense lồng nhau trên một trang sản phẩm thương mại điện tử:

            import React, { Suspense, lazy } from 'react';

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Loading product details...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading product reviews...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading related products...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

Trong ví dụ này, mỗi phần của trang sản phẩm (chi tiết sản phẩm, đánh giá và sản phẩm liên quan) được bao bọc trong ranh giới Suspense riêng. Điều này cho phép mỗi phần tải độc lập, mang lại trải nghiệm người dùng phản hồi nhanh hơn. Bạn cũng có thể xem xét việc sử dụng một thành phần skeleton tùy chỉnh làm phần dự phòng cho mỗi phần để cung cấp chỉ báo tải trực quan hấp dẫn hơn.

Các phương pháp hay nhất và lưu ý

Khi làm việc với React Suspense và quản lý tải lồng nhau, điều quan trọng là phải ghi nhớ các phương pháp hay nhất sau:

• Giữ ranh giới Suspense nhỏ: Các ranh giới Suspense nhỏ hơn cho phép kiểm soát tải chi tiết hơn và trải nghiệm người dùng tốt hơn. Tránh bao bọc các phần lớn của ứng dụng của bạn trong một ranh giới Suspense duy nhất.
• Sử dụng thành phần dự phòng tùy chỉnh: Thay thế các thông báo văn bản đơn giản bằng các chỉ báo tải hấp dẫn và nhiều thông tin về mặt hình ảnh, chẳng hạn như skeleton, spinner hoặc thanh tiến trình.
• Xử lý lỗi một cách duyên dáng: Sử dụng Error Boundaries để bắt lỗi xảy ra trong quá trình tải và hiển thị thông báo lỗi thân thiện với người dùng.
• Tối ưu hóa tìm nạp dữ liệu: Sử dụng các thư viện tìm nạp dữ liệu như swr hoặc react-query để đơn giản hóa việc tìm nạp và lưu trữ dữ liệu.
• Xem xét hiệu suất: Tránh lồng quá nhiều thành phần Suspense, vì điều này có thể ảnh hưởng đến hiệu suất. Sử dụng debouncing và throttling để giới hạn số lần một thành phần cố gắng tải dữ liệu.
• Kiểm tra trạng thái tải của bạn: Kiểm tra kỹ lưỡng các trạng thái tải của bạn để đảm bảo chúng mang lại trải nghiệm người dùng tốt trong các điều kiện mạng khác nhau.

Kết luận

React Suspense cung cấp một cách mạnh mẽ và khai báo để xử lý trạng thái tải trong các ứng dụng của bạn. Bằng cách hiểu cách kết hợp các trạng thái tải một cách hiệu quả, đặc biệt thông qua Suspense lồng nhau, bạn có thể tạo ra trải nghiệm người dùng hấp dẫn và phản hồi nhanh hơn. Bằng cách tuân theo các phương pháp hay nhất được nêu trong bài viết này, bạn có thể thành thạo React Suspense và xây dựng các ứng dụng mạnh mẽ, hiệu suất cao xử lý các phần phụ thuộc bất đồng bộ một cách duyên dáng.

Hãy nhớ ưu tiên trải nghiệm người dùng, cung cấp các chỉ báo tải nhiều thông tin và xử lý lỗi một cách duyên dáng. Với việc lập kế hoạch và triển khai cẩn thận, React Suspense có thể là một công cụ có giá trị trong kho công cụ phát triển front-end của bạn.

Bằng cách áp dụng các kỹ thuật này, bạn có thể đảm bảo ứng dụng của mình mang lại trải nghiệm mượt mà và thú vị cho người dùng trên toàn thế giới, bất kể vị trí hoặc điều kiện mạng của họ.